<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>进销页</title>
    <link rel="stylesheet" type="text/css"
          href="bootstrap/bootstrap.4.1.0.css">
    <script src="./bootstrap/jquery.3.2.1.min.js"></script>
    <script src="./bootstrap/popper.12.5.min.js"></script>
    <script src="./bootstrap/bootstrap.4.1.0.min.js"></script>
    <script src="./layui/layer/layer.js"></script>
    <script src="./layui/laydate/laydate.js"></script>
    <script src="./vue/Vue.js"></script>
    <script src="./vue/axios.js"></script>
</head>

<body>
    <div>
        <h1>方圆汽配</h1>
    </div>
    <div id="app">
        <button @click="backToIndex" class="btn-dark">返回首页</button>
        <button @click="clear" class="btn-danger">清空搜索条件</button>
        <br><br>
        <input type="text" :value="condition" placeholder="根据名称搜索" v-model="condition" style="height: 30px;width:200px">
        <input type="text" placeholder="选择开始时间" id="begin" v-model="beginTime">
        <input type="text" placeholder="选择结束时间" id="end" v-model="endTime">
        <select  v-model="selectType">
            <option v-for="item in options" :value="item.indexId">{{item.name}}</option>
        </select>
        <button @click="search" class="btn-success">搜索</button>
        <br><br>
        <div v-if="histories!=null">
            <table class="table table-striped table-hover text-center">
                <thead>
                <tr>
                    <th>序号</th>
                    <th>日期</th>
                    <th>名称</th>
                    <th>操作类型</th>
                    <th>数量</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="(history,index) in histories" :key="index">
                    <td>{{index+1}}</td>
                    <td>{{history.oprTime}}</td>
                    <td>{{history.name}}</td>
                    <td>{{history.typeName}}</td>
                    <td>{{history.num}}</td>
                </tr>
                </tbody>
            </table>

        </div>
        <div class="row">
            <div class="offset-md-5">
                <ul class="pagination">
                    <li class="page-item"><a class="page-link" href="#"> 总数: {{total}}</a></li>
                    <li class="page-item"><a class="page-link" href="#"
                                             @click.prevent="prePage"> <</a></li>
                    <li class="page-item" v-for="(item, index) in pageNum"><a
                            class="page-link" href="#" v-on:click.prevent="changePage(item)"
                            :class="{active: currentPage==index+1}">{{ index+1 }}</a></li>
                    <li class="page-item"><a class="page-link" href="#"
                                             v-on:click.prevent="nextPage">></a></li>
                    <li class="page-item"><input type="text" v-model = "pageSize" class="page-link" style="width: 60px"></li>
                    <li class="page-item"><input type="button" @click="search" class="page-link" value="确定"></li>
                </ul>
            </div>
        </div>
    </div>
    <script>
        var vue = new Vue({
            el: "#app",
            data:{
                histories:null,
                pageNum:0,
                currentPage:1,
                condition:"",
                pageSize: 10,
                total:0,
                selectTypes:null,
                beginTime:null,
                endTime:null,
                selectType:0,
                options:[
                    {
                        "indexId":0,
                        "name":"不限"
                    },
                    {
                        "indexId":1,
                        "name":"进货"
                    },
                    {
                        "indexId":2,
                        "name":"销售"
                    }
                ]
            },
            mounted(){
                laydate.render(
                    {
                        elem:"#begin",
                        type:"date",
                        format:"yyyy-MM-dd",
                        trigger:"click",
                        done: val => {
                            this.beginTime = val;
                        }
                    }
                )
                laydate.render(
                    {
                        elem:"#end",
                        type:"date",
                        format:"yyyy-MM-dd",
                        trigger:"click",
                        done: val => {
                            this.endTime = val;
                        }
                    }
                )
                this.getHistories(1)
            },
            methods:{
                clear: function() {
                    this.condition = null;
                    this.beginTime = null;
                    this.endTime = null;
                    this.selectType = 0;
                },
                backToIndex: function() {
                    location.href = "index.html"
                },
                changePage:function(page) {
                    this.currentPage = page;
                    this.getHistories(page);
                },
                search: function() {
                    this.currentPage = 1;
                    this.getHistories(1)
                },
                getHistories:function(page){
                    let data = {
                        "pageIndex": page,
                        "pageSize":this.pageSize,
                        "condition":this.condition,
                        "begin":this.beginTime,
                        "end":this.endTime,
                        "type": this.selectType
                    }
                    axios.post(
                         "/product/history",
                         data
                    ).then(
                        res => {
                            if(res.data.code===200){
                                this.histories = res.data.returnData;
                                this.total = res.data.total;
                                this.pageNum = this.getPageNum(this.pageSize, this.total);
                            }else if(res.data.code===500){
                                layer.alert(res.data.message);
                            }
                        }

                    ).catch(response => {
                        layer.alert("服务器忙，请稍后再试")
                        console.log(response)
                    })
                },
                getPageNum: function(pageSize, total) {
                    if (total <= 0){
                        return 0;
                    }
                    if (pageSize >= total) {
                        return 1;
                    }
                    let totalPage = parseInt(total / pageSize);
                    return total % pageSize === 0 ? totalPage : totalPage + 1;
                },
                prePage:function(){
                    if (this.currentPage > 1) {
                        this.currentPage  = this.currentPage - 1;
                        this.getProducts(this.currentPage);
                    }
                },
                nextPage:function(){
                    if (this.currentPage < this.pageNum) {
                        this.currentPage  = this.currentPage + 1;
                        this.getProducts(this.currentPage);
                    }
                }
            }
        });
    </script>
</body>
</html>